<template>
	<view style="height: 100vh; background: #f5f7fa;">
		<layout index="/pages/wms/index" layoutTitle="补货申请">
			<scroll-view scroll-y>
				<a-tabs v-model:activeKey="activeKey" centered class="carbon-tabs">
					<!-- 申请中标签页 -->
					<a-tab-pane key="1" tab="正在申请">
						<view class="card-list">
							<a-spin :spinning="spinning1" />

							<a-card v-for="item in pendingList" :key="item.id" class="carbon-card pending-card"
								:title="`任务编号: ${item.serialNo}`">
								<template #extra>
									<tag color="orange">审批中</tag>
								</template>

								<view class="card-content">
									<!-- 进度条区域 -->
									<view class="progress-info">
										<a-progress :percent="item.progress" :stroke-color="getStatusColor(item.status)"
											:show-info="false" stroke-linecap="square" />
										<text class="progress-text">{{item.statusText}}</text>
									</view>

									<!-- 信息项列表 -->
									<view class="info-item">
										<span class="icon-dot green"></span>
										<text class="info-label">申请人：</text>
										<text class="info-value">{{item.applyUser}}</text>
									</view>
									<view class="info-item">
										<span class="icon-dot blue"></span>
										<text class="info-label">申请时间：</text>
										<text class="info-value">{{item.applyTime}}</text>
									</view>
									<view class="info-item">
										<span class="icon-dot gray"></span>
										<text class="info-label">备注：</text>
										<text class="info-value">{{item.remark || '暂无备注'}}</text>
									</view>
								</view>
							</a-card>
						</view>
					</a-tab-pane>

					<!-- 已完成标签页 -->
					<a-tab-pane key="2" tab="审核完成">
						<view class="card-list">
							<a-spin :spinning="spinning2" />

							<a-card v-for="item in completedList" :key="item.id" class="carbon-card completed-card"
								:title="`任务编号: ${item.serialNo}`">
								<template #extra>
									<tag :color="item.auditStatus === 1 ? '#08a86a' : '#ff4d4f'">
										{{item.auditStatusText}}
									</tag>
								</template>

								<view class="card-content">
									<!-- 审核结果 -->


									<!-- 信息网格 -->
									<view class="info-grid">
										<div class="grid-item">
											<label>审核人</label>
											<div class="grid-value">{{item.auditUser}}</div>
										</div>
										<div class="grid-item">
											<label>审核时间</label>
											<div class="grid-value">{{item.auditTime}}</div>
										</div>

									</view>
								</view>
							</a-card>
						</view>
					</a-tab-pane>
				</a-tabs>

				<!-- 悬浮按钮 -->
				<uni-fab :pattern="fabConfig.pattern" @fabClick="handleCreateNew" class="carbon-fab" />
			</scroll-view>
		</layout>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		listReplenishApply
	} from "@/api/wmsApply/replenishApply";
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	const spinning1 = ref(true);
	const spinning2 = ref(true)
	// 示例数据
	const pendingList = ref([]);

	const completedList = ref([]);
	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {

			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {

			return null;
		}
	}
	async function getList2() {
		try {
			const ref = await listReplenishApply({
				pageNum: 1,
				pageSize: 200,
				applyStatus: 1
			});
			console.log(ref)

			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const user = await getQuery("query_user", item.applyUser);
				const applyStatus = await getDictVaule("apply_status", item.applyStatus);

				let a = {
					id: item.id,
					serialNo: item.serialNo,
					auditStatus: 1,
					auditStatusText: applyStatus,
					auditUser: user,
					auditTime: item.auditTime,

				};

				d.push(a);
			}
			console.log(d);
			completedList.value = d;
			spinning2.value = false;
		} catch (error) {

		}
	}
	async function getList1() {
		try {
			const ref = await listReplenishApply({
				pageNum: 1,
				pageSize: 200,
				applyStatus: 2
			});
			console.log(ref)

			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const user = await getQuery("query_user", item.applyUser);
				const applyStatus = await getDictVaule("apply_status", item.applyStatus);

				let a = {
					id: item.id,
					serialNo: item.serialNo,
					progress: 30,
					status: 0,
					statusText: applyStatus,
					applyUser: user,
					applyTime: item.applyTime,

				};

				d.push(a);
			}
			console.log(d);
			pendingList.value = d;
			spinning1.value = false;
		} catch (error) {

		}
	}
	getList1();
	getList2();

	// 配置项
	const fabConfig = reactive({
		pattern: {
			color: '#fff',
			backgroundColor: '#08a86a',
			selectedColor: '#067d4f'
		}
	});

	// 状态颜色映射
	const getStatusColor = (status) => {
		const colors = ['#08a86a', '#faad14', '#1890ff'];
		return colors[status] || colors[0];
	};

	// 新建申请
	const handleCreateNew = () => {

	};
</script>

<style lang="scss">
	/* 标签页样式 */
	.carbon-tabs {
		.ant-tabs-nav {
			background: linear-gradient(145deg, #f0f2f5 0%, #e6e8eb 100%);
			border-radius: 8px;
			padding: 8px;

			.ant-tabs-tab {
				font-weight: 500;
				color: #666;

				&.ant-tabs-tab-active .ant-tabs-tab-btn {
					color: #08a86a;
				}
			}
		}
	}

	/* 卡片列表布局 */
	.card-list {
		padding: 16px;
		display: grid;
		gap: 16px;
	}

	/* 卡片通用样式 */
	.carbon-card {
		border-radius: 12px !important;
		box-shadow: 0 4px 12px rgba(8, 168, 106, 0.08);
		border: 1px solid #e8f5e9;
		transition: transform 0.2s;

		&:hover {
			transform: translateY(-2px);
		}

		.ant-card-head {
			border-bottom: 1px solid #e8f5e9;

			.ant-card-head-title {
				font-weight: 600;
				color: #1a5632;
			}
		}

		&.pending-card {
			background: linear-gradient(145deg, #ffffff 0%, #f4faf7 100%);
		}

		&.completed-card {
			background: linear-gradient(145deg, #ffffff 0%, #f4f9ff 100%);
		}
	}

	/* 卡片内容区域 */
	.card-content {
		padding: 16px;

		.progress-info {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 20px;

			.progress-text {
				font-weight: 500;
				color: #08a86a;
			}
		}

		.info-item {
			display: flex;
			align-items: center;
			gap: 8px;
			margin: 12px 0;
			color: #434343;

			.icon-dot {
				display: inline-block;
				width: 8px;
				height: 8px;
				border-radius: 50%;

				&.green {
					background: #08a86a;
				}

				&.blue {
					background: #1890ff;
				}

				&.gray {
					background: #bfbfbf;
				}
			}

			.info-label {
				color: #666;
				min-width: 60px;
			}

			.info-value {
				color: #1a5632;
				font-weight: 500;
			}
		}

		.audit-result {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 16px;

			.status-icon {
				font-size: 24px;
				font-weight: bold;
			}

			.result-text {
				color: #434343;
				font-size: 15px;
			}
		}

		.info-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 16px;
			margin-top: 16px;

			.grid-item {
				background: #f8fbf9;
				padding: 12px;
				border-radius: 8px;
				text-align: center;

				label {
					display: block;
					color: #666;
					font-size: 12px;
					margin-bottom: 4px;
				}

				.grid-value {
					color: #1a5632;
					font-weight: 500;
				}
			}
		}
	}

	/* 悬浮按钮样式 */
	.carbon-fab {
		.uni-fab__content {
			box-shadow: 0 4px 12px rgba(8, 168, 106, 0.2) !important;
		}
	}
</style>